<template>
   <a href="/meOrder.html"><span class="logonImg"><img src="img/left.jpg"></span></a>
   <!-- logo -->
    <div class="Mid">
        <div class="MidTake">
          <div class="text">
              <h4><span>刘晓心</span>13562021254</h4>
              <p>广州市天河区东圃时代TIT广场</p>
          </div>
          <div class="img">
              <img src="img/bianji.png">
          </div>
        </div>
    </div>
    <div class="TMF " v-for="datails in datail">
<!--     <div class="TMF "> -->
    <div class="TMFS" >
        <div class="T">
          <span>购买商品</span>
          <span>待收货</span>
        </div>
        <div class="M clear">
            <div class="img">
                <img v-bind:src=datails.img>
            </div>
            <div class="text">
              <h4 >{{datails.title}}</h4>
              <h5>规格: {{datails.Specification}}</h5>
              <p>&yen{{datails.price}}</p>
            </div>
            <div class="num">x {{datails.quantity}}</div>
        </div>
        <div class="foot">
          <span>运费:</span>
          <span>&yen{{datails.freight}}</span>
        </div>
        <div class="foot">
          <span>备注:</span>
        </div>
      </div>
    </div>
    <div class="bottom">
        <div class="bottomMid " v-for="datails in datail">
          <div class="bottomTlt">订单信息</div>
          <p>订单编号: {{datails.ordernumber}}</p>
          <p>创建时间: {{datails.creationTime}}</p>
          <p>付款时间: {{datails.caytime}}</p>
          <p>物流信息:<span>{{datails.stream}}</span><span>{{datails.streamNO}}</span></p>
        </div>
    </div>
    <div class="btn">确认收货</div>
</template>

<script>
export default {
  data () {
    return {      
        datail:[],
    }
  },
  ready:function(){
    this.ajaxData();
  },
  methods:{
  ajaxData:function(){
      var _this=this;
      $.ajax({
      type:"GET",
      url:"http://localhost/login/data.php?callback=callback",
      dataType:"jsonp",
      data:{type:"myorderdatail"},
      success:function(data){
          _this.datail = data;
      }
    })
    }
  }
}
</script>
<style scoped>
  .logonImg{
     display: inline-block;
    position: fixed;
    top: 1.5%;
    width: 5%;
    left: 2%;
    z-index:1888;
  }
   .logonImg img{
    width:100%;
  }
  .Mid{
    width: 100%;
    height: 0.6rem;
    background-color: white;
    line-height: 0.3rem;
    margin-bottom: 3%;
  }
  .MidTake{
    width:95%;
    margin: auto;
  }
  .MidTake div{
    width: 85%;
    float: left;
    font-size: 0.14rem
  }
  .text{
      width: 90%;
  }
  .text h4 span{
       margin-right: 2%;
  }
  .text p span{
      color: #f29004;
      margin-right: 2%;
  }
  .Mid .img{
  width: 10%;
  position: relative;
  top: 0.12rem;
  }
  .Mid .img img{
  width: 100%;
  }
  
 .TMF{
    width: 100%;
    margin: 3% auto;
    background: white;

  }
 .TMF .TMFS{
      width: 95%;
      margin: auto;
  }
  /*待付款标题*/
 .T{
    width: 100%;
    height: .3rem;
    line-height: .3rem;
    font-size: .14rem;
    background: white;
    color: #666;
  }
 .T span:nth-child(2){
    
    position: absolute;
    right: 3%;
  }
  /*待付款中部*/
  .M {
  padding-top: 2%;
  border-top: 1px solid #dbdbdb;

  }
  .img {
    width: 20%;  
    float: left;
  }
  .M .img img{
    width: 100%;
     border:1px solid #e6e6e6;
  }
   .text {
    width: 60%;
    font-size: .16rem;
    float: left;
    margin-left:3%; 
  }
     .num{
      float: right;
      font-size: .14rem;
      margin: 0.5rem 0 .1rem 0rem;
  }
  .TMFS .text h5{
    color: #999;
  }
   .TMFS .text p{
     color: red;
  }
   .TMFS .foot{
    width: 100%;
    height: .4rem;
    line-height: .4rem;
    font-size: .14rem;
    background: white;
    border-top: 1px solid #dbdbdb;
    color: #666;
  }
  .TMFS .foot span:nth-child(2){
    position: absolute;
    right: 3%;
  }
  .bottom{
    width: 100%;
    background-color: white;
    font-size: 0.16rem;
  }
  .bottom .bottomMid{
    width: 95%;
    margin: auto;
  }
  .bottom .bottomMid .bottomTlt{
    padding: 2% 0;
    border-bottom: 1px solid #dbdbdb;
    margin-bottom: 2%;
  }
  .bottom .bottomMid p {
    line-height: 0.3rem;
  }
  .bottom .bottomMid p span{
    margin-left: 1%;
  }
  .btn{
    width: 90%;
    height: .5rem;
    line-height: .5rem;
    margin:auto;
    background-color: #f29004;
    text-align: center;
    color: #fff;
    font-size: .16rem;
    border-radius: 5px;
    position:absolute;
    bottom:1%;
    left:calc(50% - 45%);
  }
</style>
